<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>表格隔行变色</title>
  <script src="jquery-1.11.3.min.js"></script>
  <style>
     table tr td{
	    width:150px;
		height:25px;
		border:0.1px rgb(242,242,242) solid;
	 }
	 table #tr1{
	    color:white;
	    text-align:center;
	    background-color:rgb(50,50,152);
	 }
  </style>
 </head>
 <body>  
     <table cellspacing="0">
	    <thead>
	    <tr id="tr1"> <td>姓名</td> <td>工资</td> <td>入职时间</td> <td>操作</td> </tr>
		</thead>
		<tbody>
		<tr> <td>Tom</td> <td>$3500</td> <td>2010-10-25</td> <td><a href="#">删除</a></td> </tr>
		<tr> <td>Mary</td> <td>$3400</td> <td>2010-12-1</td> <td><a href="#">删除</a></td> </tr>
		<tr> <td>King</td> <td>$5900</td> <td>2009-08-17</td> <td><a href="#">删除</a></td> </tr>
		<tr> <td>Scott</td> <td>$3800</td> <td>2012-11-17</td> <td><a href="#">删除</a></td> </tr>
		<tr> <td>Smith</td> <td>$3100</td> <td>2014-01-27</td> <td><a href="#">删除</a></td> </tr>
		<tr> <td>Allen</td> <td>$3700</td> <td>2011-12-05</td> <td><a href="#">删除</a></td> </tr> 
		</tbody>
	 </table>
 </body>
 <script>
   $("tbody tr").each(function(i){
      if(i % 2 == 0){
	     $(this).css({"background-color":"white"});
	  }else{
	     $(this).css({"background-color":"rgb(242,242,242)"});
	  }
   });
 </script>
</html>
